<script lang="ts">
import { defineComponent, computed } from "vue";
// import { storeToRefs } from "pinia";

export default defineComponent({
  name: "SvgIcon",
  props: {
    name: {
      type: String,
      required: true,
    },
    size: {
      type: String,
      dafault: "12",
    },
  },
  setup(props) {
    const iconId = computed(() => {
      return `#${props.name}`;
    });
    const styles = computed(() => {
      return `height:${props.size}px;line-height:${props.size}px`;
    });
    return {
      iconId,
      styles,
    };
  },
});
</script>

<template>
  <span :style="styles">
    <svg class="svg" :width="size" :height="size">
      <use :xlink:href="iconId" width="100%" height="100%"/>
    </svg>
  </span>
</template>


